<template>
  <div class="app-container">
    <el-menu style="height: 8%;margin-bottom: 10px" :default-active="activeIndex" class="centered-menu-item" v-model="horizontal" @select="handleSelect">
      <el-menu-item index="1">日报汇总</el-menu-item>
      <el-menu-item index="2">月报汇总</el-menu-item>
    </el-menu>

    <el-card :bodyStyle="bodyStyle" v-if="update" class="box-card">
      <el-tabs type="border-card" class="elTabs">
        <el-tab-pane label="概况统计">
          <div class="main">
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              
            >
              <!-- 常规搜索条件 begin -->
              <el-form-item prop="submitTimeList">
                <el-date-picker
                  v-model="queryParams.submitTimeList"
                  type="datetimerange"
                  range-separator="至"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  size="small"
                  @keyup.enter.native="handleQuery"
                  end-placeholder="结束日期"
                  @change="handleQuery"
                  :picker-options="pickerOptionQuery"
                  :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="异常状态" prop="status">
                <el-select
                  @change="handleQuery"
                  style="width: 2.55rem"
                  v-model="queryParams.status" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in abnormalList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="部门" prop="departId">
                <el-select
                  v-model="queryParams.departId"
                  style="width: 2.55rem"
                  :disabled='isDisabled'
                  @change="deptQueryChange"
                  placeholder="请选择" clearable>
                  <el-option
                    v-for="item in deptList"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-row :gutter="10" class="mb8">
                  <!--              <el-col :span="1.5">-->
                  <!--                <el-button-->
                  <!--                  type="info"-->
                  <!--                  plain-->
                  <!--                  @click="drawer = true"-->
                  <!--                  icon="el-icon-s-tools"-->
                  <!--                  size="mini"-->
                  <!--                >设置报表</el-button>-->
                  <!--              </el-col>-->
                  <el-col :span="1.5">
                    <el-button
                      type="warning"
                      plain
                      @click="handleExport"
                      icon="el-icon-download"
                      size="mini"
                    >导出日报</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
            <el-table  :height="height" v-loading="loading" :data="humanClockList" @row-click="handleRowClick">
              <el-table-column label="时间" align="center" key="clockDate"  prop="clockDate" width="180px" sortable/>
              <el-table-column label="姓名" align="center" key="userName" prop="userName" width="120px" sortable/>
              <el-table-column label="职务" align="center" key="roleName" prop="roleName" width="180px">
                <template slot-scope="scope">
                  <span>{{ scope.row.roleName?scope.row.roleName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属规则" align="center" prop="ruleName" width="210px">
                <template slot-scope="scope">
                  <span>{{ scope.row.ruleName?scope.row.ruleName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="班次" align="center" prop="clockShift" key="clockShift" width="180px">
                <template slot-scope="scope">
                  <span>{{ scope.row.clockShift?scope.row.clockShift:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="标准工作时长" align="center" key="standardWorkHour" width="160px">
                <template slot-scope="scope">
                  <span>{{ scope.row.standardWorkHour?scope.row.standardWorkHour+'小时':'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="实际工作时长" align="center" key="actualWorkHour" width="160px">
                <template slot-scope="scope">
                  <span>{{ scope.row.actualWorkHour?scope.row.actualWorkHour+'小时':'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="最早" align="center" key="startTime" width="160px">
                <template slot-scope="scope">
                  <span>{{ scope.row.startTime?scope.row.startTime:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="最晚" align="center" key="endTime" width="160px">
                <template slot-scope="scope">
                  <span>{{ scope.row.endTime?scope.row.endTime:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="打卡次数" align="center" key="clockCount" width="160px">
                <template slot-scope="scope">
                  <span>{{ scope.row.clockCount}}次 </span>
                </template>
              </el-table-column>
              <el-table-column label="部门" align="center" key="deptName" width="120px">
                <template slot-scope="scope">
                  <span>{{ scope.row.deptName?scope.row.deptName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="假勤申请" align="center" key="applyName" width="180px">
                <template slot-scope="scope">
                  <span>{{ scope.row.applyName?scope.row.applyName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="是否外勤" align="center" prop="isOutside" key="isOutside" width="120px">
                <template slot-scope="scope">
                  <span>{{ scope.row.isOutside?'是':'否'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="校准状态" align="center" prop="adjustName" key="adjustName" width="180px"/>
              <el-table-column label="异常统计">
                <el-table-column
                  prop="abnormalCount"
                  label="异常合计"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.abnormalCount?scope.row.abnormalCount+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="lateCount"
                  label="迟到次数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.lateCount?scope.row.lateCount+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="lateMinutes"
                  label="迟到时长"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.lateMinutes?scope.row.lateMinutes+'分钟':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="leaveCount"
                  label="早退次数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.leaveCount?scope.row.leaveCount+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="leaveMinutes"
                  label="早退时长"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.leaveMinutes?scope.row.leaveMinutes+'分钟':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="absentCount"
                  label="旷工次数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.absentCount?scope.row.absentCount+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="absentMinutes"
                  label="旷工时长"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.absentMinutes?scope.row.absentMinutes+'分钟':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="lackCount"
                  label="缺卡次数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.lackCount?scope.row.lackCount+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="addressAbnormalCount"
                  label="地点异常"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.addressAbnormalCount?scope.row.addressAbnormalCount+'次':'--'}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="打卡明细">
          <div class="main">
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              
            >
              <!-- 常规搜索条件 begin -->
              <el-form-item prop="submitTimeList">
                <el-date-picker
                  v-model="queryParams.submitTimeList"
                  type="datetimerange"
                  range-separator="至"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  size="small"
                  @keyup.enter.native="handleQuery"
                  end-placeholder="结束日期"
                  @change="handleQuery"
                  :picker-options="pickerOptionQuery"
                  :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="异常状态" prop="status">
                <el-select
                  @change="handleQuery"
                  style="width: 2.55rem"
                  v-model="queryParams.status" placeholder="请选择" clearable>
                  <el-option
                    v-for="item in abnormalList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="部门" prop="departId">
                <el-select
                  v-model="queryParams.departId"
                  style="width: 2.55rem"
                  :disabled='isDisabled'
                  @change="deptQueryChange"
                  placeholder="请选择" clearable>
                  <el-option
                    v-for="item in deptList"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                    <el-button
                      type="warning"
                      plain
                      @click="handleExport"
                      icon="el-icon-download"
                      size="mini"
                    >导出日报</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
            <el-table :height="height" v-loading="loading" :data="dayClockList">
              <el-table-column label="时间" align="center" key="clockDate" prop="clockDate" width="180px" sortable/>
              <el-table-column label="姓名" align="center" key="userName" prop="userName" width="120px" sortable/>
              <el-table-column label="部门" align="center" width="120px">
                <template slot-scope="scope">
                  <span>{{ scope.row.deptName?scope.row.deptName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="职务" align="center" prop="roleName" width="180px">
                <template slot-scope="scope">
                  <span>{{ scope.row.roleName?scope.row.roleName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属规则" align="center"width="210px" key="ruleName">
                <template slot-scope="scope">
                  <span>{{ scope.row.ruleName?scope.row.ruleName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="班次" align="center" prop="clockShift" width="180px">
                <template slot-scope="scope">
                  <span>{{ scope.row.clockShift?scope.row.clockShift:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="上班1">
                <el-table-column
                  label="打卡时间"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.startTime?scope.row.startTime:'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="打卡状态"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.startStatus?scope.row.startStatus:'--'}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="下班1">
                <el-table-column
                  label="打卡时间"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.endTime?scope.row.endTime:'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="打卡状态"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.endStatus?scope.row.endStatus:'--'}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <pagination
              v-show="dayClockDetailTotal > 0"
              :total="dayClockDetailTotal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              :prev-text="'<'"
              :next-text="'>'"
              :page-size-options="[10, 20, 30,50]"
              @pagination="getList"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card :bodyStyle="bodyStyle" v-if="!update"  class="box-card">
      <el-tabs type="border-card" class="elTabs">
        <el-tab-pane label="概况统计">
          <div class="main">
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              
            >
              <!-- 常规搜索条件 begin -->
              <el-form-item prop="submitTimeList">
                <el-date-picker
                  v-model="queryParams.submitTimeList"
                  type="datetimerange"
                  range-separator="至"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  size="small"
                  @keyup.enter.native="handleQuery"
                  end-placeholder="结束日期"
                  @change="handleQuery"
                  :picker-options="pickerOptionQuery"
                  :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
              </el-form-item>

<!--              <el-form-item label="异常状态" prop="status">-->
<!--                <el-select-->
<!--                  @change="handleQuery"-->
<!--                  style="width: 2.55rem"-->
<!--                  v-model="queryParams.status" placeholder="请选择" clearable>-->
<!--                  <el-option-->
<!--                    v-for="item in abnormalList"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value"-->
<!--                  ></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
              <el-form-item label="部门" prop="departId">
                <el-select
                  v-model="queryParams.departId"
                  style="width: 2.55rem"
                  :disabled='isDisabled'
                  @change="deptQueryChange"
                  placeholder="请选择" clearable>
                  <el-option
                    v-for="item in deptList"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                    <el-button
                      type="warning"
                      plain
                      @click="handleMonthExport"
                      icon="el-icon-download"
                      size="mini"
                    >导出月报</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
            <el-table :height="height" v-loading="loading" :data="sumInfoData">
              <el-table-column label="姓名" align="center" key="userName" prop="userName" width="120px" sortable/>
              <el-table-column label="部门" align="center" width="120px">
                <template slot-scope="scope">
                  <span>{{ scope.row.deptName?scope.row.deptName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="职务" align="center" prop="roleName" width="180px">
                <template slot-scope="scope">
                  <span>{{ scope.row.roleName?scope.row.roleName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属规则" align="center" prop="ruleName" width="180px"/>
              <el-table-column label="概况">
                <el-table-column
                  label="应打卡天数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.shouldClockDays?scope.row.shouldClockDays+'天':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="实际打卡天数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.actualClockDays?scope.row.actualClockDays+'天':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="正常天数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.normalDays?scope.row.normalDays+'天':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="异常天数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.abnormalDays?scope.row.abnormalDays+'天':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="标准工作时长"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.standardWorkHourTotal?scope.row.standardWorkHourTotal+'分钟':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="实际工作时长"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.actualWorkHourTotal?scope.row.actualWorkHourTotal+'分钟':'--'}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="异常情况">
                <el-table-column
                  prop="abnormalCount"
                  label="异常合计"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.abnormalCountTotal?scope.row.abnormalCountTotal+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="迟到次数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.lateCountTotal?scope.row.lateCountTotal+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="迟到时长"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.lateMinutesTotal?scope.row.lateMinutesTotal+'分钟':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="早退次数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.leaveCountTotal?scope.row.leaveCountTotal+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="早退时长"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.leaveMinutesTotal?scope.row.leaveMinutesTotal+'分钟':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="旷工次数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.absentCountTotal?scope.row.absentCountTotal+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="旷工时长"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.absentMinutesTotal?scope.row.absentMinutesTotal+'分钟':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="缺卡次数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.lackCountTotal?scope.row.lackCountTotal+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="地点异常"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.addressAbnormalTotal?scope.row.addressAbnormalTotal+'次':'--'}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="假勤情况">
                <el-table-column
                  prop="abnormalCount"
                  label="补卡次数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.replaceTotal?scope.row.replaceTotal+'次':'--'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="abnormalCount"
                  label="外勤次数"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.outsideCount?scope.row.outsideCount+'次':'--'}}</span>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <pagination
              v-show="sumTotal>0"
              :total="sumTotal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getSumInfoList"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="打卡明细">
          <div class="main">
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              
            >
              <!-- 常规搜索条件 begin -->
              <el-form-item prop="submitTimeList">
                <el-date-picker
                  v-model="queryParams.submitTimeList"
                  type="datetimerange"
                  range-separator="至"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  size="small"
                  @keyup.enter.native="handleQuery"
                  end-placeholder="结束日期"
                  @change="handleQuery"
                  :picker-options="pickerOptionQuery"
                  :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="部门" prop="departId">
                <el-select
                  v-model="queryParams.departId"
                  style="width: 2.55rem"
                  :disabled='isDisabled'
                  @change="deptQueryChange"
                  placeholder="请选择" clearable>
                  <el-option
                    v-for="item in deptList"
                    :key="item.deptId"
                    :label="item.deptName"
                    :value="item.deptId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-row :gutter="10" class="mb8">
                  <!--              <el-col :span="1.5">-->
                  <!--                <el-button-->
                  <!--                  type="info"-->
                  <!--                  plain-->
                  <!--                  @click="drawer = true"-->
                  <!--                  icon="el-icon-s-tools"-->
                  <!--                  size="mini"-->
                  <!--                >设置报表</el-button>-->
                  <!--              </el-col>-->
                  <el-col :span="1.5">
                    <el-button
                      type="warning"
                      plain
                      icon="el-icon-download"
                      size="mini"
                      @click="handleMonthExport"
                    >导出月报</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
            <el-table ref="table" :height="height" v-loading="loading" :data="sumDetailList">
              <el-table-column label="姓名" align="center" key="userName" prop="userName" width="120px" sortable/>
              <el-table-column label="部门" align="center" width="120px">
                <template slot-scope="scope">
                  <span>{{ scope.row.deptName?scope.row.deptName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="职务" align="center" prop="roleName" width="180px">
                <template slot-scope="scope">
                  <span>{{ scope.row.roleName?scope.row.roleName:'--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属规则" align="center" prop="ruleName" width="180px"/>
              <el-table-column  width="180px">
                <template slot="header" slot-scope="header">
                  打卡明细<el-select v-model="queryParams.type"
                                     @change="handleQuery" placeholder="请选择">
                  <el-option v-for="item in detailStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                </template>
                <el-table-column
                  v-for="(item,index) in selectedMonthList"
                  :prop="item"
                  :key="item"
                  :label="item"
                  width="300">
                  <template slot="header" slot-scope="header">
                    <div style="text-align: center;">
                      {{item}}<br>{{weekList[index]}}
                    </div>
                  </template>

                  <template slot-scope="scope">
                    <div style="text-align: center;">
                      {{ scope.row[item] || '--' }}
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <pagination
              v-show="sumDetailTotal > 0"
              :total="sumDetailTotal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              :prev-text="'<'"
              :next-text="'>'"
              :page-size-options="[10, 20, 30,50]"
              @pagination="getSumDetail"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog :visible.sync="open" title="打卡详情" class="dialogOpen" width="95%">
      <div class="attendance_recordDialog_header">
          <i v-if="lastFlag==true" :update="flagShow" @click="getLastCountInfo" class="el-icon-arrow-left attendance_recordDialog_date_pre"></i>
          <i v-if="lastFlag==false" :update="flagShow" @click="getLastCountInfo" class="el-icon-arrow-left attendance_recordDialog_date_pre" style="color: #929292"></i>
        <span class="attendance_recordDialog_date">{{form.clockDate}}</span>
        <i v-if="nextFlag==true" :update="flagShow" @click="getNextCountInfo" class="el-icon-arrow-right attendance_recordDialog_date_next"></i>
        <i v-if="nextFlag==false" :update="flagShow" @click="getNextCountInfo" class="el-icon-arrow-right 123" style="color: #929292"></i>
      </div>
      <div style="padding: 17px 0;border-top: 1px solid #F1F2F3;border-bottom: 1px solid #F1F2F3;">
        <span style="font-size: 18px;color: #000">{{form.userName}}</span>
        <svg-icon :icon-class="userIcon" style="margin-bottom: 2px;margin-left: 5px"/>
        <br>
        <span style="color: #929292">{{form.deptName}}</span>
      </div>
      <div style="margin-top: 10px;cursor: pointer;" @click="turnRule">
        <span style="font-weight:bold;font-size: 14px;color: #000;">上下班打卡</span>
        <br>
        <span>打卡规则:{{form.ruleName}}</span>
        <i class="el-icon-arrow-right" style="color: #929292"></i>
      </div>
      <el-table height="350px" v-loading="adjustLoading" :data="form.clockInfoList" style="margin-top: 30px">
        <el-table-column label="类型" align="center" prop="type">
          <template slot-scope="scope">
            <span>{{ scope.row.type?scope.row.type:'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="标准打卡时间" align="center" prop="standard" >
          <template slot-scope="scope">
            <span>{{ scope.row.standard?scope.row.standard:'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际打卡时间" align="center" prop="clockDate">
          <template slot-scope="scope">
            <span>{{ scope.row.clockDate?scope.row.clockDate:'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <span>{{ scope.row.status?scope.row.status:'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地点" align="center" prop="address">
          <template slot-scope="scope">
            <span>{{ scope.row.address?scope.row.address:'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否外勤" align="center" prop="isOutSide">
          <template slot-scope="scope">
            <span>{{ scope.row.isOutside?'是':'否'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="外勤理由" align="center" prop="outSideReason">
          <template slot-scope="scope">
            <span>{{ scope.row.outSideReason?scope.row.outSideReason:'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center" prop="outSideReason">
          <template slot-scope="scope">
<!--            <span>{{ scope.row.outSideReason?scope.row.outSideReason:'&#45;&#45;'}}</span>-->
            <image-upload v-model="scope.row.attachment" :isDisabled="showTable" :limit="5"/>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark">
          <template slot-scope="scope">
            <span>{{ scope.row.remark?scope.row.remark:'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="adjustClock(scope.row)"
            >校准</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="校准打卡记录" :visible.sync="openRecord" width="30%" class="adjustDialog">
      <el-form ref="form" :model="adjustClockForm"  class="adjustClockForm">
        <el-form-item label="打卡状态" prop="status">
          <span>{{adjustClockForm.status}}</span>
        </el-form-item>
        <el-form-item label="校验方式" prop="checkWay">
          <span v-if="!adjustClockForm.checkShow">补卡</span>

          <el-select
            :update="updateSelect"
            style="width: 2.55rem"
            @change="test"
            v-if="adjustClockForm.checkShow" v-model="adjustClockForm.checkWay" placeholder="请选择">
            <el-option
              v-for="item in replaceTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="补卡时间" prop="status" v-if="adjustClockForm.checkWay=='one'">
          <el-date-picker
            style="width: 2rem"
            v-model="adjustClockForm.replaceDate"
            type="date"
            format="yyyy-MM-dd"
            disabled
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
          <el-time-picker
            style="width: 2rem;margin-left: 0.125rem"
            value-format="HH:mm"
            format="HH:mm"
            v-model="adjustClockForm.clockDate"
            placeholder="任意时间点">
          </el-time-picker>
          <br>
          <span style="color: #929292">校准后，原打卡记录变成失效记录</span>
        </el-form-item>
        <el-form-item label="校准人" prop="status">
          <span>{{adjustClockForm.adjustName}}</span>
        </el-form-item>
        <el-form-item label="备注" prop="requirement" style="width: 100%" class="textarea">
          <el-input  v-model="adjustClockForm.remark" type="textarea" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  listHumanClockCount,
  getHumanClockCount,
  selectSumInfo,
  queryPerDaySum,getSumDetail,
  selectLastByUserId} from "@/api/oa/humanClockCount"
import {listAll, selectAllSonData} from "@/api/system/dept";
import {adjustClock} from "@/api/oa/humanClock"
import moment from 'moment';
import draggable from "vuedraggable";
import {update} from "script-ext-html-webpack-plugin/lib/elements";

export default {
  name: "editRule",
  dicts: ["act_status", "purchase_type"],
  components: {
    draggable
  },
  data() {
    return {
      showTable: true,
      flagShow:true,
      lastFlag:true,
      nextFlag:true,
      bodyStyle:"height:100%",
      height:"80%",
      userIcon:"user",
      update:true,
      updateSelect:true,
      horizontal:'1',
      total:0,
      drawer: false,
      direction:'rtl',
      activeIndex:'1',
      // 按钮loading
      buttonLoading: false,
      queryParams: {
        pageNum: 1,
        departId:undefined,
        status:"",
        type:"1",
        pageSize: 10,
        submitTimeList: [], //提交时间范围
      },
      weekList:[],
      selectedMonthList:[],
      humanClockList:[],
      dayClockList:[],
      dayClockDetailTotal:0,
      pickerOptionQuery: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      // 日期的可选范围
      pickerOptionStart: {
        disabledDate: time => {
          if (this.form.endDate) {
            return time.getTime() > new Date(this.form.endDate).getTime();
          }
          return time.getTime() <= new Date();
        }
      },
      pickerOptionEnd: {
        disabledDate: time => {
          if (this.form.startDate) {
            return time.getTime() < new Date(this.form.startDate).getTime();
          }
          return time.getTime() <= new Date();
        }
      },

      defaultProps: {
        children: 'children',
        label: 'label'
      },
      draggingNodeLevel: null, // 记录拖拽节点的层级
      // 遮罩层
      loading: true,
      adjustLoading:false,
      isDisabled:false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      title: "",
      // 是否显示弹出层
      open: false,
      openRecord:false,
      abnormalList:[
        {
          label:"全部状态",
          value:""
        },
        {
          label:"正常状态",
          value:"0"
        },
        {
          label:"异常状态",
          value:"1"
        },
      ],
      replaceTypeList:[
        {
          label:"补卡",
          value:"one"
        },
        {
          label:"缺卡",
          value:"two",
        }
      ],
      deptList:[],
      tableColumns: [],
      sumInfoData:[],
      sumDetailList:[],
      sumTotal:0,
      sumDetailTotal:0,
      detailStatusList:[
        {
          label:"显示打卡状态与时间",
          value:"1"
        },
        {
          label:"显示打卡状态",
          value:"2"
        },
        {
          label:"显示打卡时间",
          value:"3"
        },
      ],
      form:{
        id:"",
        ruleName:"",
        deptName:"",
        clockList:[],
        clockInfoList:"",
        clockDate:"",
        userName:"",
      },
      adjustClockForm:{
      },
    };
  },
  created() {
    let currentDate = moment().subtract(1, 'days').format('YYYY-MM-DD')+" 23:59:59";
    let oneWeekAgo = moment().subtract(1, 'week').format('yyyy-MM-DD')+" 00:00:00";
    this.queryParams.submitTimeList[0]=oneWeekAgo;
    this.queryParams.submitTimeList[1]=currentDate;
    this.handleQuery();

  },
  watch:{
  },
  methods: {
    handleExport(){
      this.download('/oa/humanClockCount/perDayExport', {
        ...this.queryParams
      }, `上下班打卡_日报.xlsx`)
    },
    handleMonthExport(){
      this.download('/oa/humanClockCount/perMonthExport', {
        ...this.queryParams
      }, `上下班打卡_月报.xlsx`)
    },
    //判断是星期几
    getWeekday(dateString) {
      const date = new Date(dateString);
      const weekdayIndex = date.getDay();
      const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
      const weekday = weekdays[weekdayIndex];
      return weekday;
    },
    //根据选择的查询时间，获取日报汇报的
    getSelectedMonthList(){
      let startDate = moment(this.queryParams.submitTimeList[0]);
      let endDate = moment(this.queryParams.submitTimeList[1]);
      this.weekList=[];
      this.selectedMonthList=[];
      while (startDate.isBefore(endDate) || startDate.isSame(endDate)) {
        this.weekList.push(this.getWeekday(startDate.format('YYYY-MM-DD')));
        this.selectedMonthList.push(startDate.format('YYYY-MM-DD'));
        startDate.add(1, 'day');
      }
    },
    handleSelect(key, keyPath) {
      this.$emit("horizontal", this.horizontal);
      this.update=!this.update
      this.handleQuery();
    },
    test(){
      console.log(this.adjustClockForm)
      this.updateSelect=!this.updateSelect;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      //时间控件的选择内容
      this.queryParams.pageNum = 1;
      this.getSelectedMonthList();
      //出差日期范围
      if (
        this.queryParams.submitTimeList != null &&
        this.queryParams.submitTimeList.length > 0
      ) {
        this.queryParams.startDate = this.queryParams.submitTimeList[0];
        this.queryParams.endDate = this.queryParams.submitTimeList[1];
      }else {
        this.queryParams.startDate=undefined;
        this.queryParams.endDate=undefined;
      }
      this.getSumInfoList();
      this.getList();
      this.getSumDetail();
      if (this.horizontal=='2'){
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        },300)
      }
    },
    getSumInfoList(){
      this.loading = true;
      selectSumInfo(this.queryParams).then(response=>{
        this.sumInfoData=response.rows;
        this.sumTotal=response.total;
        this.loading = false;
      });
    },
    getSumDetail(){
      this.loading = true;
      getSumDetail(this.queryParams).then(response=>{
        this.sumDetailList=response.rows;
        this.sumDetailTotal=response.total;
        this.loading = false;
      })
    },
    getList() {
      this.loading = true;
      queryPerDaySum(this.queryParams).then(response=>{
        this.humanClockList=response.rows;
        this.dayClockList=response.rows;
        this.dayClockDetailTotal=response.total;
        this.total = response.total;
        this.loading = false;
      });
      this.selectAllSonData();
    },
    getLastCountInfo(){
      const dateParts =  this.form.clockDate.split(" ");
      const date = dateParts[0];
      const dayOfWeek = dateParts[1];

      const [year, month, day] = date.split("/");

      let currentDate = new Date(year, month - 1, day);
      let previousDate = new Date(currentDate);
      previousDate.setDate(currentDate.getDate() - 1);
      const previousYear = previousDate.getFullYear();
      const previousMonth = (previousDate.getMonth() + 1 < 10 ? "0" : "") + (previousDate.getMonth() + 1);
      const previousDay = (previousDate.getDate() < 10 ? "0" : "") + previousDate.getDate();
      let dateString=previousYear+"/"+previousMonth+"/"+previousDay;
      let nextDate = new Date(currentDate);
      nextDate.setDate(currentDate.getDate() - 2);
      const nextYear = nextDate.getFullYear();
      const nextMonth = (nextDate.getMonth() + 1 < 10 ? "0" : "") + (nextDate.getMonth() + 1);
      const nextDay = (nextDate.getDate() < 10 ? "0" : "") + nextDate.getDate();
      let nextDayInfo=nextYear+"/"+nextMonth+"/"+nextDay;
      let param ={
        userId:this.form.userId,
        dateString:dateString,
        nextDay:nextDayInfo
      }
      if (this.lastFlag){
        this.adjustLoading=true;
        selectLastByUserId(param).then(response=>{
          if (response.data){
            this.form=response.data;
            if (this.form.clockList!=''){
              this.form.clockInfoList = JSON.parse(this.form.clockList)
            }
          }
          if (response.flag){
            this.$set(this, 'lastFlag', true);
            this.$set(this, 'nextFlag', true);
          }else {
            this.$set(this, 'lastFlag', false);
          }
          this.flagShow=!this.flagShow;
          this.adjustLoading=false;
        })
      }
    },
    getNextCountInfo(){
      const dateParts =  this.form.clockDate.split(" ");
      const date = dateParts[0];
      const dayOfWeek = dateParts[1];

      const [year, month, day] = date.split("/");

      let currentDate = new Date(year, month - 1, day);
      let previousDate = new Date(currentDate);
      previousDate.setDate(currentDate.getDate() +1);
      const previousYear = previousDate.getFullYear();
      const previousMonth = (previousDate.getMonth() + 1 < 10 ? "0" : "") + (previousDate.getMonth() + 1);
      const previousDay = (previousDate.getDate() < 10 ? "0" : "") + previousDate.getDate();
      let dateString=previousYear+"/"+previousMonth+"/"+previousDay;
      let nextDate = new Date(currentDate);
      nextDate.setDate(currentDate.getDate() +2);
      const nextYear = nextDate.getFullYear();
      const nextMonth = (nextDate.getMonth() + 1 < 10 ? "0" : "") + (nextDate.getMonth() + 1);
      const nextDay = (nextDate.getDate() < 10 ? "0" : "") + nextDate.getDate();
      let nextDayInfo=nextYear+"/"+nextMonth+"/"+nextDay;
      let param ={
        userId:this.form.userId,
        dateString:dateString,
        nextDay:nextDayInfo
      }
      if (this.nextFlag){
        this.adjustLoading=true;
        selectLastByUserId(param).then(response=>{
          if (response.data){
            this.form=response.data;
            if (this.form.clockList!=''){
              this.form.clockInfoList = JSON.parse(this.form.clockList)
            }
          }
          if (response.flag){
            this.$set(this, 'nextFlag', true);
            this.$set(this, 'lastFlag', true);
          }else {
            this.$set(this, 'nextFlag', false);
          }
          this.adjustLoading=false;
          this.flagShow=!this.flagShow;
        })
      }
    },
    handleRowClick(row) {
      this.open=true;
      this.form=row;
      if (this.form.clockList!=''){
        this.form.clockInfoList = JSON.parse(this.form.clockList)
      }
      const dateParts =  this.form.clockDate.split(" ");
      const date = dateParts[0];
      const dayOfWeek = dateParts[1];

      const [year, month, day] = date.split("/");

      let currentDate = new Date(year, month - 1, day);
      let previousDate = new Date(currentDate);
      previousDate.setDate(currentDate.getDate() -1);
      const previousYear = previousDate.getFullYear();
      const previousMonth = (previousDate.getMonth() + 1 < 10 ? "0" : "") + (previousDate.getMonth() + 1);
      const previousDay = (previousDate.getDate() < 10 ? "0" : "") + previousDate.getDate();
      let dateString=previousYear+"/"+previousMonth+"/"+previousDay;
      let nextDate = new Date(currentDate);
      nextDate.setDate(currentDate.getDate() +1);
      const nextYear = nextDate.getFullYear();
      const nextMonth = (nextDate.getMonth() + 1 < 10 ? "0" : "") + (nextDate.getMonth() + 1);
      const nextDay = (nextDate.getDate() < 10 ? "0" : "") + nextDate.getDate();
      let nextDayInfo=nextYear+"/"+nextMonth+"/"+nextDay;
      let param ={
        userId:this.form.userId,
        dateString:dateString,
        nextDay:nextDayInfo
      }
      this.adjustLoading=true;
      selectLastByUserId(param).then(response=>{
        if (response.data){
          this.$set(this, 'lastFlag', true);
        }else {
          this.$set(this, 'lastFlag', false);
        }
        if (response.flag){
          this.$set(this, 'nextFlag', true);
        }else {
          this.$set(this, 'nextFlag', false);
        }
        this.flagShow=!this.flagShow;
        this.adjustLoading=false;
      })
    },
    resetQuery() {
      this.queryParams.tripTimeList = [];
      this.queryParams.startDate = undefined;
      this.queryParams.endDate = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    deptQueryChange(val){
      let depart=this.deptList.filter(item =>item.deptId==val);
      if (depart.length>0){
        this.queryParams.deptName=depart[0].deptName;
      }else {
        this.queryParams.deptName='';
      }
      this.handleQuery()
    },
    selectAllSonData(){
      selectAllSonData().then(res=>{
        this.deptList=res.data;
      })
    },
    adjustClock(row){
      this.adjustClockForm=JSON.parse(JSON.stringify(row));
      this.adjustClockForm.id=this.form.id;
      this.adjustClockForm.replaceId=row.id;
      let endDate = moment(this.form.createTime);
      var dateParts =this.form.clockDate.split(" ");
      var date = dateParts[0];
      this.adjustClockForm.replaceDate=date.replace(/\//g, "-");
      this.adjustClockForm.clockDate=row.standard;
      this.adjustClockForm.adjustName=this.$store.state.user.nickName;
      this.adjustClockForm.checkWay="one";
      if (row.clockDate){
        this.adjustClockForm.checkShow=true;
      }else {
        this.adjustClockForm.checkShow=false;
      }
      this.openRecord=true;
    },
    submitForm(){
      this.buttonLoading = true;
      adjustClock(this.adjustClockForm).then(response=>{
        this.$modal.msgSuccess("修改成功");
        this.buttonLoading = false;
        this.openRecord=false;
        this.openRecord=false;
        this.open=false;
        this.handleQuery();
      })
    },
    cancel(){
      this.adjustClockForm={};
      this.buttonLoading = false;
      this.openRecord=false;
    },
    turnRule(){
      this.$router.push({ path: "/roster/clockRule" });
    }
  }
};
</script>

<style  scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 0.125rem;
  background: #edefef;
  letter-spacing: 0.02rem;
}

.centered-menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep .box-card .el-card__header {
  border-bottom: none !important;
}

::v-deep .box-card {
  height: calc(92% - 10px);;
}

.main {
  width: 100%;
  height: 100%;
  .el-form{
    height: 7%;
  }
}

/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px !important; /* 横向滚动条 */
  height: 8px !important; /* 纵向滚动条 必写 */
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #dde !important;
  border-radius: 3px !important;
}
#selectForm >>> .el-form-item__label {
  font-size: 12px !important;
}
.dialogOpen{
  overflow: hidden;
  .el-dialog__header{
    height: 4px;
  }
  .attendance_recordDialog_header{
    align-items: center;
    justify-content: center;
    display: flex;
    color: #000;
    font-size:16px;
    font-weight: normal;
    .attendance_recordDialog_date_pre{

    }
    .attendance_recordDialog_date{

    }
    .attendance_recordDialog_date_next{

    }
  }
}
.adjustClockForm{
  .el-form-item{
    .el-form-item__label{
      color: #7C7C7C
    }
    .el-form-item__content{
      color: #000;
    }
  }
}
.adjustDialog{
  .el-dialog__title{
    font-size: 16px;
  }
}
.elTabs{
  height:100%;
  .el-tabs__content{
    height: 95%;
    .el-tab-pane{
      height: 100%;
    }
  }
}
.flagTrue{

}
.flagFalse{
  color: #929292
}
</style>
